<template>
  <div class="ordersList">

    <div class="content">


      <el-row>
        <div class="debug">{{vm.query}}{{vm.meta}}</div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>货源列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>

      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="8">



        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            size="small"
            placeholder="输入关键词"
            v-model="vm.query.keyword"
            prefix-icon="el-icon-search"
            @change="query({reload:true})"
            class="input-with-select">
            <el-button
              size="small"

              @click="vm.query.keyword='',query({reload:true})"
              slot="append"
            >清除
            </el-button>

          </el-input>
        </el-col>
        <el-col :span="3" :offset="5">

          <el-button size="small" type="primary" @click="dialogUploadVisible = true">管理我的货源</el-button>
          <el-dialog :visible.sync="dialogUploadVisible">

            <upload @uploadSuccess="query({reload:true}),dialogUploadVisible = false"></upload>
            <hr color="#f2f2f2" style="margin: 20px 0px 30px;">
            <p>记录库存的Excel要需要遵循下列格式要求：
            </p>
            <p> 1、每行一条库存记录，第一行为标题行；</p>
            <p> 2、每行按顺序呈现字段：店铺ID（店长电话）、品牌、车系、车型、年款、规格、库存量、批发价、发票额；</p>


            <div slot="footer" class="dialog-footer">



              <el-button size="small" @click="dialogUploadVisible = false">取 消</el-button>
            </div>
          </el-dialog>



        </el-col>
      </el-row>

      <el-table
        :data="vm.models" stripe border style="width: 100%">


        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>
        <el-table-column

          prop="city"
          label="地区"
          >
        </el-table-column>
        <el-table-column
          prop="store_name"
          label="店铺"
          >
        </el-table-column>
        <el-table-column
          prop="model_name"
          label="车型"
         >

        </el-table-column>
        <el-table-column
        prop="model_info"
        label="规格"
        >

      </el-table-column>
        <el-table-column
        prop="price"
        label="批发价"
        >

      </el-table-column>
        <el-table-column
          prop="invoice_price"
          label="开票额"
          >

        </el-table-column>
        <el-table-column
        prop="stock"
        label="库存"
        >

      </el-table-column>


      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @size-change="sizeChange($event)"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :page-sizes="[10,20,30,50,100,1000]"
        :current-page="vm.meta.page"
        layout="total,sizes,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import * as Models from '@/api/supplies'
  import upload from '@/components/Upload'
  import pages from '@/mixins/pages'

  export default{
    name: "staffMyList",
    mixins: [pages],
    components: {
      upload
    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
        Models,
        queryConfig: {
          child: 'my'
        },
        dialogUploadVisible: false,
        visibleDel:false
      }
    },
    computed:{},
    mounted() {
      this.query({reload:true})
    },
    methods: {


    }

  }
</script>
